<template>
<div>
  <van-nav-bar title="用户登录" />
  <div>
    <van-image
        round
        width="6rem"
        height="6rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    />
  </div>
  <div>
    <van-tabs v-model:active="active">
      <van-tab title="账号密码登录">
        <div>
          <van-cell-group inset>
            <van-field
                v-model="userpass.account"
                name="账号"
                label-width="4em"
                label="账号"
                placeholder="请输入用户名或手机号"
                :rules="[{ required: true, message: '请输入用户名或手机号' }]"
            />
            <van-field
                v-model="userpass.pass"
                type="password"
                name="密码"
                label-width="4em"
                label="密码"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="button" @click="loginPass">
              登录
            </van-button>
          </div>
        </div>

      </van-tab>
      <van-tab title="验证码登录">
        <div>
          <van-cell-group inset>
            <van-field
                label-width="5em"
                v-model="usercode.phone"
                name="手机号"
                label="手机号"
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请输入手机号' }]"
            />
              <van-field
                  v-model="usercode.code"
                  name="验证码"
                  label-width="5em"
                  label="验证码"
                  placeholder="请输入短信验证码"
              >
                <template #button>
                  <van-button size="small" type="primary" @click="sendCode" :disabled="btndisabled">{{btnmsg}}</van-button>
                </template>
              </van-field>
          </van-cell-group>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="button" @click="loginCode">
              登录
            </van-button>
          </div>
        </div>

      </van-tab>
    </van-tabs>

    <div style="color: #888888;font-size: 10px;margin-top: 20px">
      <div style="float: left;margin-left: 20px">
        没有账号<router-link to="/register">点击注册</router-link>
      </div>
      <div style="float: right;margin-right: 20px">
        忘记密码<router-link to="/find">点击找回</router-link>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {ref} from 'vue'
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
import axios from 'axios'
const store=useStore()
const router=useRouter();
const userpass=new ref({});
const usercode=new ref({});
const active=new ref(0)

const btndisabled=new ref(false)
const btnmsg=new ref("发送验证码")
const btnnum=new ref(60)

const sendCode = () => {
  //axios 请求 接口
  axios.get("sms/sendlcode?phone="+usercode.value.phone).then(res=>{
    if(res.data.code==0){
      btndisabled.value=true;
      btnmsg.value="重新发送("+btnnum.value+"秒)";
      //定时任务
      var t=setInterval(()=>{
        if(btnnum.value>1){
          btnnum.value--;
          btnmsg.value="重新发送("+btnnum.value+"秒)";
        }else {
          //停止计时
          btnnum.value=60;
          btnmsg.value="重新发送验证码";
          btndisabled.value=false;
          //停止定时任务
          clearInterval(t)
        }
      },1000);
    }else{
      alert(res.data.data);
    }
  })
}
const loginCode=()=>{
  //手机号验证码登录
  axios.post("user/logincode",usercode.value).then(res=>{
    if(res.data.code==0){
      //登录成功
      //设置令牌到VueX
      store.commit("setToken",res.data.data);
      //跳转到主页
      router.push("/index");
    }else {
      alert(res.data.data);
    }
  })
}
const loginPass=()=>{
  //手机号账号密码登录
  axios.post("user/loginpass",userpass.value).then(res=>{
    if(res.data.code==0){
      //登录成功
      //设置令牌到VueX
      store.commit("setToken",res.data.data);
      //跳转到主页
      router.push("/index");
    }else {
      alert(res.data.data);
    }
  })
}
</script>

<style scoped>

</style>
